<template>
	<!-- CSS动画实现loading加载效果 -->
	<!-- 使用时，放在页面最后一个标签的位置 -->
	<view class="loading" :style="{backgroundColor: color}" v-if="isshow">
		<view class="hud">
			<view class="loader"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ageloading",
		props:{
			// 设置背景色
			color:String
		},
		data() {
			return {
				isshow: true
			};
		},
		methods: {
			close() {
				const vm = this;
				// 不加延时会不生效
				setTimeout(function() {
					vm.isshow = false
				},300)
			},
			show() {
				this.isshow = true
			}
		}
	}

</script>

<style>
	.loading {
		/* 使页面浮动在最上方 */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
 		width: 100%;
		height: 100%;
		margin: 0; 
		/* background-color: rgba(0, 0, 0, 0.5); */
		/* 子元素垂直居中 */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.hud {
		/* 子元素垂直居中 */
		display: flex;
		align-items: center;
		justify-content: center;
		
		border: 1rpx solid;
		border-radius: 10rpx;
		background-color: rgba(0, 0, 0, 0.8);
		width: 150rpx;
		height: 150rpx;
	}
	/* CSS动画圆环加载效果 */
	.loader {
		border: 6rpx solid #696969; /*灰色 */
		border-top: 6rpx solid #ffffff;/*白色 */
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
		animation: spin 1s linear infinite;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg);}
		100% { transform: rotate(360deg);}
	}
	
</style>